﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>元宵节</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<!--<link rel="stylesheet" href="/dist/css/swiper.min.css">
<link rel="stylesheet" href="/dist/css/animate.min.css">
<script src="/dist/js/swiper.min.js"></script>
<script src="/dist/js/swiper.animate.min.js"></script>-->

<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>

<style>
*{
	margin:0;
	padding:0;
}
html,body{
	height:100%;
}
body{
	font-family:"microsoft yahei";
}
.swiper-container {
  /*  width: 320px;
    height: 480px;*/
	width: 100%;
    height: 100%;
	background:#fff;
}
.swiper-slide:nth-of-type(1){
	width:100%;
	height:100%;
	background:url(invite/beijing.png) no-repeat left top;
	background-size:100% 100%;
}
.swiper-slide{
	width:100%;
	height:100%;
	background:url(invite/beijing2.png) no-repeat left top;
	background-size:100% 100%;
}
img{
	display:block;
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background: #fff;
opacity: .4;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
@-webkit-keyframes tipmove
{
	0%
	{bottom:0px;opacity:0}
	50%
	{bottom:5px;opacity:1}
	100%
	{bottom:10px;opacity:0}
}

.ani{
	position:absolute;
	}
.txt{
	position:absolute;
}
#array2{
	position:absolute;z-index:999;-webkit-animation: tipmove 1.5s infinite ease-in-out;
}
#array1{
	position:absolute;z-index:999;-webkit-animation: scrolmove 1.5s infinite ease-in-out;
}
.arro1{
	-webkit-animation: arro1move 1.5s  infinite ease-in-out;
	animation-delay:3 s;
	opacity: 0;
}
@-webkit-keyframes arro1move
{
	0%
	{bottom:0px;opacity:0}
	50%
	{bottom:5px;opacity:1}
	100%
	{bottom:10px;opacity:0}
}
.s2-content{
	width: 330px;
	background-color: rgba(1,1,1,.5);
	margin-left: -165px;
	left: 50%;
	top: 10%;
	position: relative;
	overflow: hidden;
	height: 500px;
}
.s2-content-title{
	background: rgb(222,222,222,.2);
	position: relative;
	height: 35px;
	margin-top: 40px;
	width: 330px;
}
.content-txt{
	color: #FFFFFF;
	font-size: 16px;
	width: 275px;
	text-align: left;
	margin: 30px auto;
	letter-spacing: 2px;
	position: absolute;
	height: 300px;
	left: 50%;
	margin-left: -137.5px;
}
.content-txt p{
	margin: 10px 0;
}
/* s3 */
.s3-text{
	color: #FFFFFF;
	top: 220px;
	left: 60px;
	position: absolute;
}
.s3-dec{
	color: #eee;
	font-size: 12px;
	position: absolute;
	top: 250px;
	left: 100px;
}
.s4-txt1,.s4-txt2,.s4-txt3,.s4-txt4{
	color: #FFFFFF;
	font-size: 30px;
	position: absolute;
}
.s4-txt1{
	background: url(invite/s4-arro2.png);
	top: 250px;
	left: 20px;
	background-size: cover;
	width: 250px;
	text-align: center;
	height: 48px;
	line-height: 48px;
}
.s4-txt2{
	background: url(invite/s4-arro1.png);
	top: 320px;
	right: 20px;
	background-size: cover;
	width: 300px;
	text-align: center;
	height: 48px;
	line-height: 48px;
}
.s4-txt3{
	background: url(invite/s4-arro2.png);
	top: 390px;
	left: 20px;
	background-size: cover;
	width: 250px;
	text-align: center;
	height: 48px;
	line-height: 48px;
}
.s4-txt4{
	background: url(invite/s4-arro1.png);
	top: 460px;
	right: 20px;
	background-size: cover;
	width: 300px;
	text-align: center;
	height: 48px;
	line-height: 48px;
}
.s5-form {
	width: 300px;
	position: absolute;
	top: 180px;
	left: 40px;
}
.s5-form input{
	background: none;
	border:0px;
	font-size: 18px;
	margin: 10px 10px;
	color: white;
}
.s5-form div{
	border-radius: 5px;
	border: 1px solid #00FFFF;
	margin: 16px 0;
}
.s5-btn{
	font-size: 25px;
	color: white;
	padding: 3px 0;
	position: absolute;
	top: 400px;
	left: 40px;
	border-radius: 5px;
	background: rgb(15,153,176);
	width: 300px;
	text-align: center;
	cursor: pointer;
}
.s5-btn:active{
	background: rgb(1,153,176);
}
</style>
</head>

<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
    <!---slide1----------------->
        <section class="swiper-slide">
					<img src="invite/s1-t1.png" class="ani resize"
						style="width:163px;left:81px;top:80px;z-index:5;"
						swiper-animate-effect="zoomInDown"
						swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<img src="invite/s1-Partner recruitment.png" class="ani resize"
							style="width:100px;left:112px;top:135px;z-index:5;"
							swiper-animate-effect="fadeInRight"
							swiper-animate-duration="0.5s" swiper-animate-delay=".8s">
					<img src="invite/s1-t2.png" class="ani resize"
						style="width:130px;left:95px;top:160px;z-index:5;"
						swiper-animate-effect="bounceIn"
						swiper-animate-duration="0.5s" swiper-animate-delay="1s">
					<img src="invite/s1-t3.png" class="ani resize"
						style="width:200px;left:60px;top:152px;z-index:5;"
						swiper-animate-effect="fadeInRight"
						swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">
					<img src="invite/s1-bottom.png" class="ani resize"
						style="width:200px;left:60px;top:310px;z-index:5;"
						swiper-animate-effect="fadeIn"
						swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
					<img src="invite/s1-arro.png" class="ani resize arro1"
						style="width:35px;left:145px;top:350px;z-index:5;">
        </section>
     <!---slide2-------------->
        <section class="swiper-slide">
					<div class="s2-content">
						<div class="s2-content-title">
							<img src="invite/s2-t1.png"  class="ani resize"
							style="position: absolute;width:120px;top: 1px;left:85px;"
							swiper-animate-effect="fadeInLeftBig"
							swiper-animate-duration="1s" swiper-animate-delay=".4s">
						</div>
						<div class="content-txt ani resize"
								swiper-animate-effect="fadeInLeft"
								swiper-animate-duration="1s" swiper-animate-delay=".8s">
						  	<p >"52教育"平台是利用先进的互联网</p>
								<p >技术，建立托福机构与家长实时通</p>
								<p >讯的平台，是建立可靠的用户认证</p>
								<p >体系，完善家长、学生与机构的信</p>
								<p>息匹配，完善服务的系统，帮助托</p>
								<p>辅机构健全管理体系，提升服务质</p>
								<p>量。平台旨在通过互联网大数据，</p>
								<p>整合机构教育资源、社会服务资源</p>
								<p>,给学生、家长和机构提供专业、</p>
								<p>信赖、便捷的线上线下辅导教育高</p>
								<p>质量的服务。</p>
						</div>
					</div>
					<img src="images/arrobg.png"
						style="position: absolute;width:200px; bottom:0px; left:60px;"  class="ani resize"
						swiper-animate-effect="rubberBand"
						swiper-animate-duration="1s" swiper-animate-delay="0s">
					<img src="images/arro.png" style="position: absolute;width:30px;bottom:0px; left:145px;" id="array2" class="resize">
        </section>
     <!--slide3-------------->
        <section class="swiper-slide">
					<img src="invite/s3-t1.png" class="ani resize"
						style="position:absolute;width:160px;left:82px;top:85px"
						swiper-animate-effect="fadeInDown"
						swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<div class="text s3-text ani resize"
						swiper-animate-effect="fadeInLeft"
						swiper-animate-duration="1s" swiper-animate-delay=".8s">
							在广西10座城市寻找35-50家托辅机构合作
					</div>
					<div class="text s3-dec ani resize"
						swiper-animate-effect="fadeInRight"
						swiper-animate-duration="1s" swiper-animate-delay=".9s">
							活动时间:2018年12月8日-2019年1月31日
						</div>
						<img src="invite/s3-map.png" class="ani resize"
							style="position:absolute;width:360px;left:-50px;top:180px"
							swiper-animate-effect="bounceInDown"
							swiper-animate-duration="1s" swiper-animate-delay="1.2s">
					<img src="images/arrobg.png"
						style="position: absolute;width:200px; bottom:0px; left:60px;"  class="ani resize"
						swiper-animate-effect="rubberBand"
						swiper-animate-duration="1s" swiper-animate-delay="1s">
					<img src="images/arro.png" style="position: absolute;width:30px;bottom:0px; left:145px;" id="array2" class="resize">
        </section>
        <!---slide4----------------->
        <section class="swiper-slide">
					<img src="invite/s4-t1.png"  class="ani resize"
						style="position: absolute;width:200px;top:90px;left:65px;"
						swiper-animate-effect="fadeInDown"
						swiper-animate-duration=".8s" swiper-animate-delay=".5s">
					<div class="s4-txt1 ani resize"
						swiper-animate-effect="bounceInLeft"
						swiper-animate-duration="1s" swiper-animate-delay=".8s">
								无需资金投入
					</div>
					<div class="s4-txt2 ani resize"
						swiper-animate-effect="bounceInRight"
						swiper-animate-duration="1s" swiper-animate-delay=".8s">
								占干股
					</div>
					<div class="s4-txt3 ani resize"
						swiper-animate-effect="bounceInLeft"
						swiper-animate-duration="1s" swiper-animate-delay="1.2s">
								加入即有分润
					</div>
					<div class="s4-txt4 ani resize"
						swiper-animate-effect="bounceInRight"
						swiper-animate-duration="1s" swiper-animate-delay="1.2s">
								名额有限，快点哦
					</div>
					<img src="images/arrobg.png"
						style="position: absolute;width:200px; bottom:0px; left:60px;"  class="ani resize"
						swiper-animate-effect="rubberBand"
						swiper-animate-duration="1s" swiper-animate-delay="1s">
					<img src="images/arro.png" style="position: absolute;width:30px;bottom:0px; left:145px;" id="array2" class="resize">
        </section>
				<!-- slide5 -->
				<section class="swiper-slide">
						<img src="invite/s5-t1.png" class="ani resize"
							style="position: absolute;width:150px;top:80px;left:90px"
							swiper-animate-effect="wobble"
							swiper-animate-duration="1s" swiper-animate-delay=".5s">
						<div class="s5-form ani resize"
							swiper-animate-effect="flipInY"
							swiper-animate-duration="1s" swiper-animate-delay=".8s">
								<div class="25-form-mobile">
									<input type="text" placeholder="电话">
								</div>
								<div class="25-form-name">
									<input type="text" placeholder="负责人姓名">
								</div>
								<div class="25-form-organization">
									<input type="text" placeholder="机构名称">
								</div>
						</div>
						<div class="s5-btn ani resize"
						swiper-animate-effect="lightSpeedIn"
						swiper-animate-duration="1s" swiper-animate-delay="1s">
								报名
						</div>
					<img src="images/arrobg.png"
						style="position: absolute;width:200px; bottom:0px; left:60px;"  class="ani resize"
						swiper-animate-effect="rubberBand"
						swiper-animate-duration="1s" swiper-animate-delay="1s">
					<img src="images/arro.png" style="position: absolute;width:30px;bottom:0px; left:145px;" id="array2" class="resize">
				</section>
    </div>

   <!-- <img src="images/web-swipe-tip.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize"> -->
  <div class="swiper-pagination"></div>
</div>


<script>

scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');
          for (var j=0; j<resizes.length; j++) {
           resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
		   resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
		   resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
		   resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px';

          }
var scales = document.querySelectorAll('.txt');
for (var i=0; i<scales.length; i++) {
	ss=scales[i].style;
	ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform =ss.transform='translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px) translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)scaleX('+scaleW+') scaleY('+scaleH+') ';
}


  var mySwiper = new Swiper ('.swiper-container', {
    direction : 'vertical',
    pagination: {
	   el:'.swiper-pagination',
    },
    mousewheel: true,
    on:{
		slideChangeTransitionEnd: function(){
			 alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
		 },
	  init: function(){
        swiperAnimateCache(this);
        swiperAnimate(this);
 	  },
      slideChangeTransitionEnd: function(){
  	    swiperAnimate(this);
      }
    }
  })
  </script>
</body>
</html>
